<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户主页</title>
    <link rel="stylesheet" type="text/css" href="../../css/login.css">

    <script src="../../plugins/jquery/jquery-3.6.0.js"></script>
    <script src="../../js/login.js"></script>
</head>

<body>
    <div id="page1"></div>


    <div id="login">
        <form id="login_form">
            <table style="margin: auto">
                <tr>
                    <td style="font-size: 16px;color: #999;font-family: 'American Typewriter'" align="right">邮箱</td>
                    <td><input class="c1" type="text" name="email" id="email">
                        <span id="error" style="color: red;font-size: 12px;display: none;">* 邮箱不存在!</span>
                    </td>
                </tr>

                <tr>
                    <td style="font-size: 16px;color: #999;font-family: 'American Typewriter'" align="right">验证码</td>
                    <td><input class="c1" type="text" id="code" name="code">
                        <input type="button" onclick="send_code()" style="color: white;border-radius: 2px;border: 0;width: 100px;height: 35px;background-color:red" value="发送验证码">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2" style="color: #ccc;font-size: 12px"><input type="checkbox" id="is_pwd">是否记住邮箱</td>

                </tr>
                <tr>
                    <td></td>
                    <td colspan="2">
                        <input type="button" onclick="login()" style="color: white;border-radius: 2px;border: 0;width: 100px;height: 35px;background-color:deepskyblue" value="login">
                        <input type="reset" style="color: white;border-radius: 2px;border: 0;width: 100px;height: 35px;background-color:red" value="cancel">
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div id="page2"></div>
    <script>
    //发送验证码
    function send_code(){
            //1. 获取邮箱文本框中的输入邮箱
            let email = $("#email").val();
            //2. oschina - 正则表达式 - [\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?
            
            //构建一个js的正则表达式对象
            let patterns = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/
        
            if(!patterns.test(email)){
                alert("sorry,请输入合法的邮箱地址");
                return;//用来结束整个方法的
            }
            
            //准备发送的参数..
            //key-value形式
            //json对象
           let datas = {"email":email};
           $.get('http://localhost:88/hayabusa/user/sendCode',datas,function(data){
               if(data.code!=200){
                    //有问题..
                    let span_obj = document.getElementById("error");
                    span_obj.style.display="";
               }else{
                    let span_obj = document.getElementById("error");
                    span_obj.style.display="none";
                    alert("验证码发送成功!请查收!")
               }
           });
        }
        $(function(){
        $("#page1").load("../common/nav.html");
        $("#page2").load("../common/footer.html");
        })

        function login(){//登录...
    //获取记住密码是否被勾选上...
    let ck = document.getElementById("is_pwd");
    if(ck.checked){
        //利用h5中的本地存储策略
        //获取文本框中的用户名和密码...
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        localStorage.setItem("username",username);
        localStorage.setItem("password",password);
    }else{
        localStorage.clear();
    }
    //核心代码 - 真正的把表单中的数据发送到后台server
  //第二个参数是传输的参数
  //参数的格式有两种
  //1. key-value形式
  //2. json数据-    {key:value,key2:value2,key3:value3}

  //let datas = $("#login_form").serialize();//表单序列化
  //alert(datas);

  //发送json对象数据
  //$("#username").val() -> document.getElementById("username").value;
  let email_value = $("#email").val();
  let code_value = $("#code").val();

 let datas = {"email":email_value,"code":code_value};

  //发送json字符串
//   let datas = '{"userName":username_value,"passWord":password_value}';

  $.post('http://localhost:88/hayabusa/user/logins',datas,function(result){
    //result代表的就是server返回给前端的json数据即可[Result].
    if(result.code!=200){
                    alert(result.msg);
                }else if(result.code==200){
                    window.location.href="index.html";
                }
  })
}
        
    </script>


</body>

</html>